<template>
  <view class="success-page-root">
    <view class="success-image-container">
      <image :src="`${baseFilePath}/home/success.png`"></image>
    </view>
    <view class="success-bt-container">
      <view @click="goBack" class="bt-item go-back-bt">返回</view>
      <view @click="showHistory" class="bt-item history-bt">查看历史记录</view>
    </view>
  </view>
</template>

<script>
import {baseMixins} from "@/mixins/baseMixins";
import {messagePath} from "@/until/publicConfig";

export default {
  mixins: [baseMixins],
  data() {
    return {
      liaisonId: '',
      backPath: '',
      historyPath: ''
    }
  },
  methods: {
    goBack() {
      const url = this.representativeId != null && this.representativeId !== '' ? `${this.backPath}?representativeId=${this.representativeId}&liaisonId=${this.liaisonId}` : `${this.backPath}?liaisonId=${this.liaisonId}`
      uni.redirectTo({url})
    },
    showHistory() {
      uni.redirectTo({url: `${this.historyPath}?liaisonId=${this.liaisonId}&tabIndex=1`})
    },
  },
  onLoad(params) {
    this.liaisonId = params.liaisonId
    this.representativeId = params.representativeId || ''
    this.backPath = params.backPath
    this.historyPath = params.historyPath
  },
}
</script>

<style scoped lang="scss">
.success-page-root {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .success-image-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    image {
      height: 500rpx;
      width: 490rpx;
    }
  }

  .success-bt-container {
    height: 120rpx;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    background: #fff;
    align-items: center;

    .bt-item {
      width: 40%;
      height: 80rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      border-radius: 40rpx;
      font-weight: normal;
      font-size: 30rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;

      &.go-back-bt {
        border: 1rpx solid #8D8D8D;
        color: #434141;
        background: transparent;
      }

      &.history-bt {
        background: #AD2325;
        color: #FFFFFF;
      }
    }
  }
}
</style>
